<!DOCTYPE html>
<html>
<head>
<title>A * 算法 寻路演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="astar.js"></script>
<script type="text/javascript" src="canvas.js"></script>
<script type="text/javascript" src="matrix.js"></script>
<script type="text/javascript" src="binaryheap.js"></script>
<style type="text/css">
.graphic-container{
    background:#eeffff;
    border:solid black 1px;
}
</style>
</head>
<body>
<form action="javascript:void(0);">
<label for="size">地图尺寸</label>
<select id="size" name="size">
    <option value="10x10">10x10</option>
    <option value="20x20">20x20</option>
    <option value="30x30">30x30</option>
    <option value="40x40">40x40</option>
    <option value="50x50">50x50</option>
    <option value="60x60">60x60</option>
    <option value="70x70">70x70</option>
    <option value="80x80">80x80</option>
    <option value="90x90">90x90</option>
    <option value="100x100">100x100</option>
    <option value="200x200">200x200</option>
</select>
<label for="ratio">墙/节点 比率</label>
<select id="ratio" name="ratio">
    <option value="10">10%</option>
    <option value="20">20%</option>
    <option value="30">30%</option>
</select>
<label for="canvas_size">屏幕尺寸</label>
<select id="canvas_size" name="canvas_size">
    <option value="500">小</option>
    <option value="1000">中</option>
    <option value="1500">大</option>
</select>
<input type="submit" name="__submit" value="generate map" />
</form>

<canvas class="graphic-container" width="500" height="500"></canvas>
<script type="text/javascript">

var matrix  = null;
var canvas  = document.getElementsByTagName('canvas')[0];
var gd      = new CanvasGD(canvas);
var positionStart, positionGoal;
var onAnime = false;

document.getElementsByTagName('form')[0].addEventListener('submit', function () {

    var size        = document.getElementById('size').value.split('x');
    var ratio       = document.getElementById('ratio').value;
    canvas.width    = document.getElementById('canvas_size').value;
    canvas.height   = canvas.width;
    matrix          = new Matrix({
        'width'     : size[0],
        'height'    : size[1]
    });
    matrix.generateRandom(ratio);
    gd.fillGrid(matrix.getStructure());
    positionStart   = positionGoal  = null;

    return      false;
});

canvas.addEventListener('click', function (event) {

    var position    = gd.getCellByCoordinate({
        'x' : event.offsetX,
        'y' : event.offsetY
    });

    if (null == matrix || matrix.isWall(position) || onAnime) {

        return  ;
    }

    if (positionStart && positionGoal != positionStart) {

        positionGoal    = {
            'x'     : position.x,
            'y'     : position.y,
            'style' : 'orange'
        };
        positionStart.style = 'white';
        var path        = (new AStar).search(matrix.getStructure(), positionStart, positionGoal);
        gd.fillCell(positionStart);
        onAnime         = true;
        gd.animatePath(
            path,
            positionGoal.style,
            function () {

                onAnime = false
        });
        positionStart   = positionGoal;
        positionGoal    = null;

        return  ;
    }

    positionStart   = {
        'x'     : position.x,
        'y'     : position.y,
        'style' : 'orange'
    };
    gd.fillCell(positionStart);
    positionStart   = position;
});
</script>
</body>
</html>